<template>
  <div>
    <a data-toggle="modal" :data-target="'#' + modalId" class="mast-btn"
      ><span
        class="glyphicon glyphicon-cog"
        :style="{ 'font-size': buttonSize }"
      ></span
    ></a>
    <!-- Modal -->
    <teleport to="body">
      <div
        class="modal fade"
        :id="modalId"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
      >
        <div class="modal-dialog" role="document" style="width: 350px">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title" id="myModalLabel">マスタ設定</h4>
            </div>
            <div class="modal-body">
              <div class="row" v-show="dateShow">
                <div class="col-xs-12">
                  <span>カレンダーマスタ選択</span>
                </div>
                <div class="child-div">
                  <div class="col-xs-12 radio radio-space">
                    <label>
                      <input
                        type="radio"
                        name="date"
                        value="company"
                        v-model="dateTypeTmp"
                        :disabled="companyDateTypeDisable"
                      />
                      <span>企業別</span>
                    </label>
                    <label>
                      <input
                        type="radio"
                        name="date"
                        value="core"
                        v-model="dateTypeTmp"
                      />
                      <span>共通</span>
                    </label>
                  </div>
                  <div class="col-xs-12" v-if="dateMastSelectStatus('company')">
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-show="dateTypeTmp === 'company'"
                      v-model="dateSelectedTmp"
                    >
                      <option
                        :value="item.id"
                        v-for="item in dateCompanyMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                  <div class="col-xs-12" v-if="dateMastSelectStatus('core')">
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-show="dateTypeTmp === 'core'"
                      v-model="dateSelectedTmp"
                    >
                      <option
                        :value="item.id"
                        v-for="item in dateCoreMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row top-normal-space" v-show="storeShow">
                <div class="col-xs-12">
                  <span>店舗マスタ選択</span>
                </div>
                <div class="child-div">
                  <div class="col-xs-12 radio radio-space">
                    <label>
                      <input
                        type="radio"
                        name="storeMast"
                        value="company"
                        v-model="storeTypeTmp"
                      />
                      <span>企業別</span>
                    </label>
                    <label>
                      <input
                        type="radio"
                        name="storeMast"
                        value="core"
                        v-model="storeTypeTmp"
                      />
                      <span>共通</span>
                    </label>
                  </div>
                  <div class="col-xs-12" v-show="storeTypeTmp === 'company'">
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-model="storeSelectedTmp"
                    >
                      <option
                        :value="item.id"
                        v-for="item in storeCompanyMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                  <div class="col-xs-12" v-show="storeTypeTmp === 'core'">
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-model="storeSelectedTmp"
                    >
                      <option
                        :value="item.id"
                        v-for="item in storeCoreMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row top-normal-space" v-show="productShow[0]">
                <div class="col-xs-12">
                  <span>{{ productLabels[0] }}</span>
                </div>
                <div class="child-div">
                  <div class="col-xs-12 radio radio-space">
                    <label>
                      <input
                        type="radio"
                        name="productMastOne"
                        value="company"
                        v-model="productTypeTmpOne"
                      />
                      <span>企業別</span>
                    </label>
                    <label>
                      <input
                        type="radio"
                        name="productMastOne"
                        value="core"
                        v-model="productTypeTmpOne"
                      />
                      <span>共通</span>
                    </label>
                  </div>
                  <div
                    class="col-xs-12"
                    v-show="productTypeTmpOne === 'company'"
                  >
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-model="productSelectedTmpOne"
                    >
                      <option
                        :value="item.id"
                        v-for="item in productCompanyMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                  <div class="col-xs-12" v-show="productTypeTmpOne === 'core'">
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-model="productSelectedTmpOne"
                    >
                      <option
                        :value="item.id"
                        v-for="item in productCoreMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row top-normal-space" v-show="productShow[1]">
                <div class="col-xs-12">
                  <span>{{ productLabels[1] }}</span>
                </div>
                <div class="child-div">
                  <div class="col-xs-12 radio radio-space">
                    <label>
                      <input
                        type="radio"
                        name="productMastTwo"
                        value="company"
                        v-model="productTypeTmpTwo"
                      />
                      <span>企業別</span>
                    </label>
                    <label>
                      <input
                        type="radio"
                        name="productMastTwo"
                        value="core"
                        v-model="productTypeTmpTwo"
                      />
                      <span>共通</span>
                    </label>
                  </div>
                  <div
                    class="col-xs-12"
                    v-show="productTypeTmpTwo === 'company'"
                  >
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-model="productSelectedTmpTwo"
                    >
                      <option
                        :value="item.id"
                        v-for="item in productCompanyMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                  <div class="col-xs-12" v-show="productTypeTmpTwo === 'core'">
                    <select
                      class="form-control"
                      style="width: 160px"
                      v-model="productSelectedTmpTwo"
                    >
                      <option
                        :value="item.id"
                        v-for="item in productCoreMast"
                        :key="item.id"
                      >
                        {{ item.label }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" @click="submit">
                確定
              </button>
            </div>
          </div>
        </div>
      </div>
    </teleport>
  </div>
</template>
<script>
export default {
  name: "mk-mast",
  props: {
    /**
     * select下拉框值
     */
    dateCompanyMast: {
      type: Array,
      default() {
        return [];
      },
    },
    storeCompanyMast: {
      type: Array,
    },
    productCompanyMast: {
      type: Array,
    },
    dateCoreMast: {
      type: Array,
      default() {
        return [];
      },
    },
    storeCoreMast: {
      type: Array,
    },
    productCoreMast: {
      type: Array,
    },
    /**
     * 商品title
     * 多系统会有多个商品条件选择的可能
     * ['','']
     */
    productLabels: {
      type: Array,
      default() {
        return ["商品マスタ選択", ""];
      },
    },
    dateShow: {
      type: Boolean,
      default() {
        return true;
      },
    },
    storeShow: {
      type: Boolean,
      default() {
        return true;
      },
    },
    /**
     * 商品mast选择显示几个
     * [true, false]
     */
    productShow: {
      type: Array,
      default() {
        return [true, false];
      },
    },
    /**
     * 以下参数为选择确定值
     */
    dateType: {
      type: String,
    },
    dateValue: {
      type: String,
    },
    storeType: {
      type: String,
    },
    storeValue: {
      type: String,
    },
    productTypeOne: {
      type: String,
    },
    productValueOne: {
      type: String,
    },
    productTypeTwo: {
      type: String,
    },
    productValueTwo: {
      type: String,
    },
    buttonSize: {
      type: String,
      default() {
        return "12px";
      },
    },
    companyMulti: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      id: parseInt(Math.random() * 1000),
      /**
       * 本地html属性
       */
      modalId: `modalId${this.id}`,
      localWatch: true, //是否触发watch事件
      companyDateTypeDisable: false,
      /**
       * 保存临时属性
       */
      dateTypeTmp: "company",
      dateSelectedTmp: "",
      storeTypeTmp: "company",
      storeSelectedTmp: "",
      productTypeTmpOne: "company",
      productSelectedTmpOne: "",
      productTypeTmpTwo: "company",
      productSelectedTmpTwo: "",
    };
  },
  watch: {
    dateTypeTmp(value) {
      if (!this.localWatch) {
        return;
      }
      if (this.dateCompanyMast.length === 0 || this.dateCoreMast.length === 0) {
        return;
      }
      if (value === "core") {
        this.dateSelectedTmp = this.dateCoreMast[0].id;
      } else {
        this.dateSelectedTmp = this.dateCompanyMast[0].id;
      }
    },
    storeTypeTmp(value) {
      if (!this.localWatch) {
        return;
      }
      if (value === "core") {
        this.storeSelectedTmp = this.storeCoreMast[0].id;
      } else {
        this.storeSelectedTmp = this.storeCompanyMast[0].id;
      }
      this.disableCompanyDataType();
    },
    productTypeTmpOne(value) {
      if (!this.localWatch) {
        return;
      }
      if (value === "core") {
        this.productSelectedTmpOne = this.productCoreMast[0].id;
      } else {
        this.productSelectedTmpOne = this.productCoreMast[0].id;
      }
      this.disableCompanyDataType();
    },
    productTypeTmpTwo(value) {
      if (!this.localWatch) {
        return;
      }
      if (value === "core") {
        this.productSelectedTmpOne = this.productCoreMast[0].id;
      } else {
        this.productSelectedTmpOne = this.productCoreMast[0].id;
      }
    },
  },
  computed: {
    dateMastSelectStatus() {
      return (type) => {
        if (type === "company") {
          return this.dateCompanyMast === undefined
            ? false
            : this.dateCompanyMast.length > 0;
        }
        return this.dateCoreMast === undefined
          ? false
          : this.dateCoreMast.length > 0;
      };
    },
  },
  methods: {
    /**
     * 确定
     * 副作用：将当前mast中选择的数据同步到父级组件
     */
    submit() {
      this.updateData();
      window.$(`#${this.modalId}`).modal("hide");
    },
    /**
     * 更新父组件数据
     */
    updateData() {
      if (this.dateShow) {
        this.$emit("update:dateType", this.dateTypeTmp);
        this.$emit("update:dateValue", this.dateSelectedTmp);
      }
      if (this.storeShow) {
        this.$emit("update:storeType", this.storeTypeTmp);
        this.$emit("update:storeValue", this.storeSelectedTmp);
      }
      if (this.productShow[0]) {
        this.$emit("update:productTypeOne", this.productTypeTmpOne);
        this.$emit("update:productValueOne", this.productSelectedTmpOne);
      }
      if (this.productShow[1]) {
        this.$emit("update:productTypeTwo", this.productTypeTmpTwo);
        this.$emit("update:productValueTwo", this.productSelectedTmpTwo);
      }
    },
    /**
     * 用于处理企业多选情况
     * 前提：
     * 1. 仅有一个商品mast选择
     * 2. 店铺和商品均为自社
     * 效果：
     * 禁用企业别日期mast类型
     */
    disableCompanyDataType() {
      let typeStatus =
        this.storeTypeTmp === "core" && this.productTypeTmpOne === "core"
          ? true
          : false;
      if (this.companyMulti && typeStatus && this.dateShow) {
        //需要对应企业多选
        this.dateTypeTmp = "core";
        this.companyDateTypeDisable = true;
        return;
      }
      this.companyDateTypeDisable = false;
    },
  },
  mounted() {
    let vm = this;
    window.$(`#${this.modalId}`).on("show.bs.modal	", function () {
      vm.localWatch = false;
      vm.dateSelectedTmp = vm.dateValue;
      vm.dateTypeTmp = vm.dateType;
      vm.storeSelectedTmp = vm.storeValue;
      vm.storeTypeTmp = vm.storeType;
      vm.productSelectedTmpOne = vm.productValueOne;
      vm.productTypeTmpOne = vm.productTypeOne;
      vm.productSelectedTmpTwo = vm.productValueTwo;
      vm.productTypeTmpTwo = vm.productTypeTwo;
      vm.localWatch = true;
    });
  },
};
</script>
<style lang="scss" scoped>
.radio-space label {
  margin-left: 5px;
  span {
    font-size: 12px;
  }
}
.child-div {
  padding-left: 15px;
  .col-xs-12 {
    margin-top: 0px;
    margin-bottom: 0px;
    select {
      margin-top: 5px;
    }
  }
}
.top-normal-space {
  margin-top: 15px;
}
a {
  cursor: pointer;
}
</style>
